<!--  -->
<template>
  <div class="files-add-person detail-person" v-loading="loading">
    <div class="files-add-basic" ref="basicInfor">
      <h2>基本信息：</h2>
      <el-form
        :inline="true"
        size="mini"
        ref="form"
        :model="form"
        class="demo-form-inline"
      >
        <div class="border">
          <el-form-item label="姓名：">
            <span>{{ form.name }}</span>
          </el-form-item>
          <el-form-item label="身份证号：">
            <span>{{ form.idCard }}</span>
          </el-form-item>
          <el-form-item label="性别：">
            <span>{{ form.sex }}</span>
          </el-form-item>
          <el-form-item label="学历：">
            <span>{{ form.qualification }}</span>
          </el-form-item>
          <el-form-item label="联系方式：">
            <span>{{ form.phone }}</span>
          </el-form-item>
          <el-form-item label="专业：">
            <span>{{ form.speciality }}</span>
          </el-form-item>
          <el-form-item label="毕业院校：">
            <span>{{ form.graduationInstitution }}</span>
          </el-form-item>
          <el-form-item label="毕业时间：">
            <span>{{ form.graduationTime }}</span>
          </el-form-item>
          <el-form-item label="是否受到处分：">
            <span>{{ form.punishmentTag }}</span>
          </el-form-item>
          <el-form-item label="是否为党员：">
            <span>{{ form.partyMemberTag }}</span>
          </el-form-item>
          <el-form-item label="入党时间：">
            <span>{{ form.partyMembershipTime }}</span>
          </el-form-item>
          <el-form-item label="籍贯：">
            <span>{{ form.nativePlace }}</span>
          </el-form-item>
          <el-form-item label="家庭住址：">
            <span>{{ form.address }}</span>
          </el-form-item>
          <el-form-item label="存在于：">
            <span
              >{{ form.storedCabinet }}柜 {{ form.storedTier }}层
              {{ form.storedNumber }}号</span
            >
          </el-form-item>
          <el-form-item label="备注：">
            <span>{{ form.notes }}</span>
          </el-form-item>
        </div>
      </el-form>
    </div>
    <div class="files-add-picture">
      <el-form :inline="true" size="mini" class="demo-form-inline">
        <el-form-item label="附件信息：">
          <el-select
            v-model="typeId"
            placeholder="请选择"
            @change="annexChange"
          >
            <el-option
              v-for="item in annexList"
              :key="item.value"
              :label="item.value"
              :value="item.key"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="danger" @click="downloadImgAll" size="mini"
            >下载</el-button
          >
          <el-button type="warning" @click="goback" size="mini">返回</el-button>
        </el-form-item>
      </el-form>
      <div class="files-main">
        <div class="files-main-right">
          <div class="files-list" :style="{ height: aheight + 'px' }">
            <div
              class="image-box"
              v-for="(item, index) in showImageList"
              :key="'image' + index"
            >
              <div class="ImgItem">
                <i
                  class="el-icon-download download-icon"
                  @click="downloadImg(item, index)"
                ></i>
                <el-image
                  style="
                    width: 160px;
                    height: 200px;
                    border: 1px #eee solid;
                    border-radius: 4px;
                  "
                  :src="item.fileShowPath"
                  :preview-src-list="srcList"
                  fit="contain"
                >
                </el-image>
              </div>
              <p class="image-name">
                <template v-if="!item.fileName"
                  >{{ item.typeName }}_{{ item.index }}.{{
                    item.extName
                  }}</template
                >
                <template v-else>{{ item.fileName }}</template>
              </p>
            </div>
          </div>
        </div>
      </div>
      <template v-if="page == 'upshifting' && form.isShowExtract == 0">
        <div class="tidang">
          <el-form
            :inline="true"
            size="mini"
            ref="form"
            :model="form"
            class="demo-form-inline"
          >
            <el-form-item label="提档至：">
              <el-select
                v-model="upshifting.provinceCode"
                placeholder="请选择"
                @change="changeProvince"
              >
                <el-option
                  v-for="item in provinceList"
                  :key="item.key"
                  :label="item.value"
                  :value="item.key"
                >
                </el-option>
              </el-select>
              <el-select
                v-model="upshifting.cityCode"
                placeholder="请选择"
                @change="changeCity"
              >
                <el-option
                  v-for="item in cityList"
                  :key="item.key"
                  :label="item.value"
                  :value="item.key"
                >
                </el-option>
              </el-select>
              <el-select
                v-model="upshifting.countyCode"
                placeholder="请选择"
                @change="changeCounty"
              >
                <el-option
                  v-for="item in countyList"
                  :key="item.key"
                  :label="item.value"
                  :value="item.key"
                >
                </el-option>
              </el-select>
              <el-input
                v-model="upshifting.address"
                placeholder="具体单位地址"
                style="width: 260px"
              ></el-input>
            </el-form-item>
          </el-form>
        </div>
        <div class="files-footer">
          <el-button type="danger" size="small" @click="onExtAdd"
            >提档</el-button
          >
        </div>
      </template>
      <template v-if="form.isShowExtract">
        <el-form :inline="true" size="mini" class="showEx-form-inline">
          <el-form-item label="已提档至：">
            <span style="font-size;14px;color:red;font-weight:700;">{{
              form.extractArchivesToPosition
            }}</span>
          </el-form-item>
          <el-form-item label="提档日期："
            ><span style="font-size;14px;color:red;font-weight:700;">{{
              form.extractArchivesTime
            }}</span></el-form-item
          >
          <el-form-item label="操作者："
            ><span style="font-size;14px;color:red;font-weight:700;">{{
              form.operator
            }}</span></el-form-item
          >
        </el-form>
      </template>
    </div>
  </div>
</template>

<!-- <script src="./gpyhs.js" type="text/javascript" charset="UTF-8"></script> -->
<script>
import {
  getInfo,
  getAnnexList,
  extAdd,
  regionalList,
  annexDownload,
} from "@/api/files/basics";
import { typeDictData } from "@/api/index";
export default {
  components: {},
  props: ["id", "page"],
  data() {
    return {
      options: [
        {
          value: "选项1",
          label: "黄金糕",
        },
        {
          value: "选项2",
          label: "双皮奶",
        },
        {
          value: "选项3",
          label: "蚵仔煎",
        },
        {
          value: "选项4",
          label: "龙须面",
        },
        {
          value: "选项5",
          label: "北京烤鸭",
        },
      ],
      value: "",
      form: {
        name: "",
        nativePlace: "",
        notes: "",
        idCard: "",
        phone: "",
        punishmentTag: "否",
        qualification: "",
        sex: "男",
        speciality: "",
        storedCabinet: "",
        storedTier: "",
        storedNumber: "",
        notes: "",
      },

      typeId: "",
      annexMsg: "",
      annexList: [],
      educationList: [],

      url: "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
      srcList: [],
      imageList: [],
      showImageList: [],
      aheight: "",
      resizeFlag: null,
      fileList: [],
      loading: false,
      provinceList: [],
      cityList: [],
      countyList: [],
      upshifting: {
        personnelId: this.id,
        province: "",
        provinceCode: "",
        city: "",
        cityCode: "",
        county: "",
        countyCode: "",
        address: "",
      },
    };
  },
  computed: {},
  watch: {},
  //方法集合
  methods: {
    onBlur(key1, key) {
      this[key1][key] = this[key1][key] ? this[key1][key].trim() : "";
    },
    getTypeDictData() {
      let params = {};
      typeDictData(params).then((res) => {
        if (res.code == 200) {
          this.annexList = res.data;
          this.typeId = this.annexList[0].key;
          this.annexMsg = this.annexList[0].value;
          if (this.id) {
            this.getAnnexList();
          }
        } else {
          this.$message.warning(res.msg);
        }
      });
    },
    setPageOpe() {
      if (this.id) {
        this.getInfoForm();
      }
    },
    getInfoForm() {
      this.loading = true;
      this.imageList = [];
      let data = { id: this.id };
      getInfo(data).then((res) => {
        if (res.code == 200) {
          this.form = res.data;
          this.loading = false;
        } else {
          this.$message.warning(res.msg);
          this.loading = false;
        }
      });
    },
    getAnnexList() {
      this.loading2 = true;
      let data2 = { personnelId: this.id };
      getAnnexList(data2).then((res) => {
        if (res.code == 200) {
          this.loading2 = false;
          let imageList = [];
          res.data.forEach((item) => {
            let obj = {
              id: item.id,
              fileShowPath: item.fileShowPath, //预览地址
              filePath: item.filePath, //下载地址
              fileName: item.fileName,
              typeId: item.typeId,
              typeName: item.typeName,
            };
            imageList.push(obj);
          });
          this.imageList = imageList;
          if (this.typeId == -1) {
            this.showImageList = JSON.parse(JSON.stringify(this.imageList));
          } else {
            this.showImageList = this.sortImgList(this.imageList, this.typeId);
          }
          this.getSrcList();
        } else {
          this.loading2 = false;
          this.$message.warning(res.msg);
        }
      });
    },
    sortImgList(list, typeId) {
      let resList = []; //学历证明
      list.forEach((item) => {
        if (item.typeId == typeId) {
          resList.push(item);
        }
      });
      return resList;
    },
    goback() {
      this.$emit("closeDetail", 1);
    },

    annexChange(value) {
      this.annexList.forEach((item) => {
        if (item.key == value) {
          this.annexMsg = item.value;
        }
      });
      if (value == -1) {
        this.showImageList = JSON.parse(JSON.stringify(this.imageList));
      } else {
        this.showImageList = this.sortImgList(this.imageList, value);
      }
      this.getSrcList();
    },
    downloadImgAll() {
      let data = {
        personnelId: this.id,
        typeId: this.typeId,
      };
      let filename = this.form.name;
      this.download("/archive/annex/download", data, `${filename}.zip`);
    },
    //下载图片
    downloadImg(item) {
      //window.location.href = item.path;
      var a = document.createElement("a"); // 创建一个<a></a>标签
      a.href = process.env.VUE_APP_BASE_API + item.filePath; //重点（如测试发现下载文件不存在/找不到，检查路径）
      a.download = item.fileName ? item.fileName : this.annexMsg; // 设置下载文件文件名
      a.style.display = "none"; // 隐藏a标签
      document.body.appendChild(a); // 将a标签追加到文档对象中
      a.click(); // 模拟点击了a标签，会触发a标签的href的读取，浏览器就会自动下载了
      a.remove(); // 一次性的，用完就删除a标签
    },
    getSrcList() {
      let srcList = [];
      this.showImageList.forEach((item) => {
        srcList.push(item.fileShowPath);
      });
      this.srcList = srcList;
    },
    getRegionalList(parentCode, type) {
      let data = {
        parentCode: parentCode,
      };
      regionalList(data)
        .then((res) => {
          if (res.code == 200) {
            if (type == 1) {
              this.cityList = res.data;
            } else if (type == 2) {
              this.countyList = res.data;
            } else {
              this.provinceList = res.data;
            }
          } else {
            this.$message.warning(res.msg);
          }
        })
        .catch((err) => {
          this.$message.warning(res.msg);
        });
    },
    changeProvince(key) {
      this.provinceList.forEach((item) => {
        if (item.key == key) {
          this.upshifting.provinceCode = key;
          this.upshifting.province = item.value;
        }
      });
      this.getRegionalList(key, 1);
    },
    changeCity(key) {
      this.cityList.forEach((item) => {
        if (item.key == key) {
          this.upshifting.cityCode = key;
          this.upshifting.city = item.value;
        }
      });
      this.getRegionalList(key, 2);
    },
    changeCounty(key) {
      this.countyList.forEach((item) => {
        if (item.key == key) {
          this.upshifting.countyCode = key;
          this.upshifting.county = item.value;
        }
      });
    },
    onExtAdd() {
      let data = this.upshifting;
      extAdd(data).then((res) => {
        if (res.code == 200) {
          this.$message.success("提档成功");
          this.$emit("closeDetail");
          this.$emit("getTableThird");
        } else {
          this.$message.warning(res.msg);
        }
      });
    },
    async updateAdd() {
      let h =
        window.innerHeight ||
        document.documentElement.clientHeight ||
        document.body.clientHeight; //浏览器高度
      let topH = 0;
      if (!this.onlyUpload) {
        topH = this.$refs.basicInfor.offsetHeight;
      }
      let tableHeight = h - topH - 310;
      this.aheight = tableHeight;
      console.log(this.aheight);
      await this.$nextTick();
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    let _this = this;
    _this.getTypeDictData();
    _this.setPageOpe();
    if (_this.page == "upshifting") {
      this.getRegionalList(null);
    }
    _this.$nextTick(() => {
      //_this.LoadCameraDocument();
    });

    _this.updateAdd();
    window.onresize = () => {
      if (_this.resizeFlag) {
        clearTimeout(_this.resizeFlag);
      }
      _this.resizeFlag = setTimeout(() => {
        _this.updateAdd();
        _this.resizeFlag = null;
      }, 100);
    };
  },
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang="scss" scoped>
//@import url(); 引入公共css类
.files-add-person {
  padding: 20px 30px;
  h2 {
    font-size: 14px;
  }
  .files-main {
    display: flex;
    overflow: hidden;
    clear: both;
    &-right {
      margin-left: 20px;
      flex: 1;

      .files-list {
        width: 100%;
        border: 1px #bbb solid;
        padding: 10px;
        overflow-y: scroll;
      }
      .image-box {
        float: left;
        padding: 5px 8px;
        > p {
          font-size: 14px;
          text-align: center;
          padding: 0;
          margin: 0;
        }
      }
    }
    &-left {
      width: 400px;
      margin-top: 33px;
    }
  }
  .files-footer {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    margin-top: 15px;
  }
  .ImgItem {
    position: relative;
    > .download-icon {
      position: absolute;
      right: 10px;
      top: 170px;
      display: block;
      cursor: pointer;
      z-index: 999;
      font-size: 24px;
    }
    > .del-icon {
      position: absolute;
      right: -8px;
      top: -8px;
      width: 24px;
      height: 24px;
      cursor: pointer;
      background: url("../../../assets/del-icon.png") no-repeat center center;
      background-size: 100% 100%;
      z-index: 999;
      display: block;
    }
  }
}
.tidang {
  padding-top: 20px;
}
</style>
<style lang="scss">
.detail-person {
  .el-form--inline .el-form-item {
    margin-right: 40px;
  }
  .tidang {
    .el-select {
      margin-right: 10px;
    }
  }
}
.showEx-form-inline {
  margin-top: 20px;
}
.showEx-form-inline.el-form--inline .el-form-item__label {
  color: red;
  float: left;
}
</style>
